/*
* @Author: wangliang
* @Date: 2018/4/12
* @description: 联系方式
*/
<template>
    <div class="custom-box p-20 m-t-20">
        <el-row>
            <el-col :span="5" class="ca-title">
                <h3>联系方式 ({{total}})</h3>
                <button type="button" 
                    class="custom-btn custom-btn-round m-l-15"
                    @click="add()">
                    <i class="fa fa-plus"></i>
                </button>
            </el-col>
        </el-row>
        <el-row class="align-center handleTitle m-t-20">
        <el-col :span="2">ID</el-col>
        <el-col :span="3">联系人</el-col>
        <el-col :span="3">固话</el-col>
        <el-col :span="2">传真</el-col>
        <el-col :span="3">邮件</el-col>
        <el-col :span="2">邮编</el-col>
        <el-col :span="5">办公地址</el-col>
        <el-col :span="4">操作</el-col>  
    </el-row> 
    <draggable @end="drag" :options="options" style="max-height:300px;overflow-y: scroll;">
          <el-row class="ca-align-center ca-leng-38" v-for="item in data" :key="item.id" :class="dragClassCursor">
              <el-col :span="2" class="align-center line-h-40">
                  
                  <span class="wordWrap">{{item.id}}</span>
              </el-col>
              <el-col :span="3" class="align-center line-h-40">
                  <span v-if="!item.contacts">-</span>
                  <span class="wordWrap">{{item.contacts}}</span>
              </el-col>
              <el-col :span="3" class="align-center line-h-40">
                  <span v-if="!item.tel">-</span>
                  <span class="wordWrap">{{item.tel}}</span>
              </el-col>
              <el-col :span="2" class="align-center line-h-40">
                  <span v-if="!item.fax">-</span>
                  <span class="wordWrap">{{item.fax}}</span>
              </el-col>
              <el-col :span="3" class="align-center line-h-40">
                  <span v-if="!item.email">-</span>
                  <span class="wordWrap">{{item.email}}</span>
              </el-col>
              <el-col :span="2" class="align-center line-h-40">
                  <span v-if="!item.postCode">-</span>
                  <span class="wordWrap">{{item.postCode}}</span>
              </el-col>
              <el-col :span="5" class="align-center line-h-40">
                  <span v-if="!item.address">-</span>
                  <span class="wordWrap">{{item.address}}</span>
              </el-col>
              <el-col :span="4" class="align-center line-h-40">
                    <el-button  type="text" round @click="edit(item)">编辑</el-button>
                    <el-button  type="text" round @click="deleteId(item.id)">删除</el-button>
              </el-col>  
          </el-row>
      </draggable> 
        <!-- 联系方式编辑 -->
        <el-dialog title="联系方式" :visible.sync="dialogVisible" :show-close="false" width="40%">
            <el-form :model="comContactDto">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="联系人" label-width="90px">
                            <el-input v-model="comContactDto.contacts" @input="controlSaveBtn()"></el-input>
                        </el-form-item>
                        <el-form-item label="传真" label-width="90px">
                            <el-input v-model="comContactDto.fax" @input="controlSaveBtn()"></el-input>
                        </el-form-item>
                        <el-form-item label="固话" label-width="90px">
                            <el-input v-model="comContactDto.tel" @input="controlSaveBtn()"></el-input>
                        </el-form-item>
                        <el-form-item label="邮编" label-width="90px">
                            <el-input v-model="comContactDto.postCode" @input="controlSaveBtn()"></el-input>
                        </el-form-item>
                        <el-form-item label="邮件" label-width="90px">
                            <el-input v-model="comContactDto.email" @input="controlSaveBtn()"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="办公地址" label-width="90px">
                            <el-input type="textarea" rows="3" resize="none" v-model="comContactDto.address" @input="controlSaveBtn()"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button type="primary" round @click="save" :disabled="saveBtn">保存</el-button>
                <el-button round @click="close()">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import draggable from 'vuedraggable';
import { Component, Watch } from 'vue-property-decorator';
import { ComContactDto, PageParam } from '../../../../../api/Interface';
import ContactsService from '../../../../../service/subject/company/contact-info/index';
@Component({
    components: {
        draggable
    }
})
export default class BasicInfo extends Vue {
    // 初始化数据 相当于data
    public comContactDto: ComContactDto = {} as ComContactDto; // <PersonVo> {}
    public pageParam: PageParam = {pageIndex: 1, pageSize: 10} as PageParam; // <PersonVo> {}
    public saveBtn: boolean = true; // 保存按钮是否可点击
    public dragClassCursor: string = '';
    public sortList: any[] = []; // 排序数据
    public sortListArr: number[] = []; // 排序参数
    public tabIndex: number = 0;
    public valueTime: string = '';
    public inputValue: string = '';
    public checkList: string[] = [];
    public data: object[] = [];
    public total: number = 0;
    public dialogVisible: boolean = false;
    public innerVisible: boolean = false;
    public status: string = '添加';
    public options: object = {};
    // refs
    public $refs: { };

    // watch
    @Watch('msg')
    public onChildChanged(val: string, oldVal: string) {
        return val + '***';
    }

    // 声明周期钩子
    public mounted() {
        this.options = {
        'dragClass': 'dragClass',
        'ghostClass': 'ghostClass',
        'chosenClass': 'sortable-chosen'
        };
        this.dragClassCursor = 'dragClassCursor';
        this.getMessage();
        this.getContactInfoList();
    }
    public created() {
        this.getMessage();
    }

    // 方法
    public getMessage() {
        // this.msg = 4446;
    }
    // 获取联系方式列表
    public async getContactInfoList() {
        const res = await ContactsService.getComContactByCompanyIdPage(Number(this.$route.params.itemId));
        if (res.resCode === '0') {
            this.data = res.data;
            this.total = res.data.length;
        }
    }
    // 切换页码
    public handleCurrentChange(val: number) {
        this.pageParam.pageIndex = val;
        this.getContactInfoList();
    }
    // 保存
    public async save() {
        this.comContactDto.companyId = Number(this.$route.params.itemId);
        if (this.status === '添加') {
            const res = await ContactsService.saveComContact(this.comContactDto);
            if (res.resCode === '0') {
                this.$message.success('添加成功');
                this.dialogVisible = false;
                this.getContactInfoList();
            }
        } else if (this.status === '编辑') {
            const res = await ContactsService.updateComContact(this.comContactDto);
            if (res.resCode === '0') {
                this.$message.success('修改成功');
                this.dialogVisible = false;
                this.getContactInfoList();
            }
        }
    }
    // 控制保存按钮可用
    public controlSaveBtn() {
        if (!this.comContactDto.contacts && !this.comContactDto.fax && !this.comContactDto.tel && !this.comContactDto.postCode && !this.comContactDto.email && (this.comContactDto.address === 'undefined' || !this.comContactDto.address)) {
            this.saveBtn = true;
        } else {
            this.saveBtn = false;
        }
    }
    // 编辑联系方式
    public edit(info: ComContactDto) {
        this.status = '编辑';
        this.dialogVisible = true;
        this.comContactDto = info;
        this.controlSaveBtn();
    }
    // 添加联系方式
    public add() {
        this.status = '添加';
        this.comContactDto = {} as ComContactDto;
        this.controlSaveBtn();
        this.dialogVisible = true;
    }
    // 删除联系方式
    public deleteId(delId: number) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const res = await ContactsService.deleteComContact(delId);
            if (res.resCode === '0') {
                this.$message.success('删除成功');
                this.getContactInfoList();
            }
        }).catch(() => {
            return false;         
        });
    }
    // 取消
    public close() {
        this.dialogVisible = false;
        this.getContactInfoList();
    }
    public drag(val: any) {
        this.sortListArr = [];
        this.sortList = Array.from(val.target.children);
        this.sortList.map((item, index) => {
            this.sortListArr.push(Number(item.children[0].innerText));
        });
        this.saveOrder();
    }
    // 拖动排序
    public async saveOrder() {
        const { resCode } = await ContactsService.orderByComContact({idList: this.sortListArr});
        if (resCode === '0') {
        this.$message.success('成功！');
        }
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ca-title h3{
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    float: left;
}
.line-h {
    line-height: 36px;
}
.addBtn {
    font-size: 22px;
    margin-top: 12px;
    margin-left: 10px;
}
.el-checkbox+.el-checkbox {
    margin-right: 10px;
}
.el-checkbox {
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
}
.dragClassCursor{
    cursor: move;
}
 .dragClass{
      background: #ddd;
  }
  .ghostClass{
      opacity:0;
  }
  .sortable-chosen{
      background-color:#ddd;
  }
  .dragClassCursor{
      cursor: move;
  }
  .line-h-40{
    line-height: 40px;
  }
</style>